﻿@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title></title>
    <link rel="stylesheet" type="text/css" href="~/css/style.css" />

    <script src="~/javascript/jquery.js"></script>
</head>
<body>
    <main class="main-cont content mCustomScrollbar">
        <div class="page-wrap">
            <!--开始::内容-->
            <section class="page-hd">
                <header>
                    <h2 class="title">表单结构展示</h2>
                    <p class="title-description">
                        两列式表单结构，一般针对产品详情，文章详情应用。
                    </p>
                </header>
                <hr>
            </section>
            <div class="form-group-col-2">
                <div class="form-label">商品标题：</div>
                <div class="form-cont">
                    <input type="text" placeholder="100%输入框..." class="form-control form-boxed">
                </div>
            </div>
            <div class="form-group-col-2">
                <div class="form-label">手机号码：</div>
                <div class="form-cont">
                    <input type="tel" placeholder="手机号码..." class="form-control form-boxed" style="width:300px;">
                    <button class="btn btn-secondary-outline">测试</button>
                    <span class="word-aux"><i class="icon-warning-sign"></i>清正确输入11位手机号码</span>
                </div>
            </div>
            <div class="form-group-col-2">
                <div class="form-label">电子邮箱：</div>
                <div class="form-cont">
                    <input type="email" placeholder="电子邮箱..." class="form-control form-boxed">
                </div>
            </div>
            <div class="form-group-col-2">
                <div class="form-label">保持四个字否则截断：</div>
                <div class="form-cont">
                    <select style="width:auto;">
                        <option>商品分类</option>
                        <option>女装</option>
                        <option>男装</option>
                    </select>
                    <select style="width:auto;">
                        <option>子分类</option>
                        <option>上装</option>
                        <option>下装</option>
                    </select>
                </div>
            </div>
            <div class="form-group-col-2">
                <div class="form-label">兴趣爱好：</div>
                <div class="form-cont">
                    <label class="check-box">
                        <input type="checkbox" checked="checked" name="mmm" />
                        <span>读书</span>
                    </label>
                    <label class="check-box">
                        <input type="checkbox" name="mmm" />
                        <span>听音乐</span>
                    </label>
                    <label class="check-box">
                        <input type="checkbox" name="mmm" />
                        <span>羽毛球</span>
                    </label>
                    <label class="check-box">
                        <input type="checkbox" name="mmm" />
                        <span>篮球</span>
                    </label>
                    <label class="check-box">
                        <input type="checkbox" name="mmm" />
                        <span>足球</span>
                    </label>
                    <label class="check-box">
                        <input type="checkbox" checked="checked" name="mmm" />
                        <span>读书</span>
                    </label>
                    <label class="check-box">
                        <input type="checkbox" name="mmm" />
                        <span>听音乐</span>
                    </label>
                    <label class="check-box">
                        <input type="checkbox" name="mmm" />
                        <span>羽毛球</span>
                    </label>
                    <label class="check-box">
                        <input type="checkbox" name="mmm" />
                        <span>篮球</span>
                    </label>
                    <label class="check-box">
                        <input type="checkbox" name="mmm" />
                        <span>足球</span>
                    </label>
                </div>
            </div>
            <div class="form-group-col-2">
                <div class="form-label">性别：</div>
                <div class="form-cont">
                    <label class="radio">
                        <input type="radio" name="sex" />
                        <span>男士</span>
                    </label>
                    <label class="radio">
                        <input type="radio" name="sex" checked="checked" />
                        <span>女士</span>
                    </label>
                    <label class="radio">
                        <input type="radio" name="sex" />
                        <span>保密</span>
                    </label>
                </div>
            </div>
            <div class="form-group-col-2">
                <div class="form-label">摘要：</div>
                <div class="form-cont">
                    <textarea class="form-control form-boxed">摘要信息</textarea>
                </div>
            </div>
            <div class="form-group-col-2">
                <div class="form-label"></div>
                <div class="form-cont">
                    <input type="submit" class="btn btn-primary" value="提交表单" />
                    <input type="reset" class="btn btn-disabled" value="禁止" />
                </div>
            </div>
            <!--开始::结束-->
        </div>
    </main>
</body>
</html>
